import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import TextInput from 'rax-textinput';

function Gateway() {

  const [apiName,setApiName] = useState('');
  const [methodType,setMethodType] = useState('');
  const [header,setHeader] = useState('');
  const [param,setParam] = useState('');
  const [resp,setResp] = useState('');


  //初始化jsbirdge
  const excuteBridge = () => {
    
    // 初始化 jsbridge
    ZWJSBridge.onReady(() => { 
      console.log('初始化完成后，执行bridge方法');
    })
  };

  // 10.1 无线网关

  const wirelessReq = () => {
    excuteBridge();
    console.log('**** begin wirelessReq(). apiName:  ' + apiName + ' methodType:  ' + methodType + ' header:  ' + header + ' param: ' + param);

    var headerJson,paramJson;

    if (header != null && header != '') {
       headerJson = JSON.parse(header);
    }
    if (param != null && header != '') {
       paramJson = JSON.parse(param);
    }

    ZWJSBridge.egop({
      api: apiName, 
      method: methodType, 
      header: headerJson,
      param: paramJson
      }).then((result) =>{
        var resultMsg = JSON.stringify(result);
        setResp(resultMsg);
        console.log('#### ZWJSBridge.egop() log. result:   ' + resultMsg); 
      }).catch((error) =>{

        var errorMsg = JSON.stringify(error);
        setResp(errorMsg);
        console.log('#### ZWJSBridge.egop() error:' + errorMsg);
      });

      console.log('**** exit wirelessReq()');
  }

  return (
    <View>
        <div>
          <h1 style={{textAlign:'center',color:'white'}}>10.欢迎来到请求类页面</h1>
          <div>
              <h2>10.1  无线网关</h2>
              <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入业务方API名称:</h5>
                   <TextInput value={apiName}
                              onChangeText={text => setApiName(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请选择方法类型:</h5>
                   <span>
                        <button onClick={() => setMethodType('GET')}>GET</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button onClick={() => setMethodType('POST')}>POST</button>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入附加的header(JSON字符串):</h5>
                   <TextInput value={header}
                              onChangeText={text => setHeader(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div>
                   <h5 style={{textAlign:'justify',color:'blue'}}>请输入附加的参数(JSON字符串):</h5>
                   <TextInput value={param}
                              onChangeText={text => setParam(text)}
                              style={{
                                width: 600,
                                height: 200,
                                borderWidth: 1,
                                borderColor: '#dddddd',
                                borderStyle: 'solid'
                            }}
                   ></TextInput>
                </div>
                <div>
                <h5 style={{textAlign:'justify',color:'blue'}}>响应结果为:</h5>
                   <Text>{resp}</Text>
                </div>
                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
                <button onClick={() => wirelessReq()}
                        style={{
                          width: 160,
                          height: 40,
                          backgroundColor: 'grey',
                          color: 'white',
                          fontSize: 8
                      }}  
                >发送请求</button>

                <div>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>
          </div>

        </div>
    </View>
  );
}

export default Gateway;
